<template>
	<view :class="[config.style]">
		<!-- 绑定手机号弹出框 -->
		<uni-popup ref="BindMobile" type="bottom">
			<view class="bind-mobile-section">
				<view class="title">绑定手机号</view>
				<view class="description">为了更好的服务您，请绑定手机号</view>
				<view class="input-group">
					<view class="input-row">
						<input type="number" class="input-clear" maxlength="11" placeholder="请输入手机号" :value="mobile" @input="getMobileValue" />
					</view>
					<view class="input-row verify">
						<input type="number" class="input-clear" maxlength="6" placeholder="请输入验证码" v-mobile="code" @input="getMobileCode" />
						<button type="mini" class="send-code" :class="sendBtnDisabled==true?'disabled':''" hover-class="button-hover" :disabled="sendBtnDisabled" @click="sendCode()">{{sendBtnText}}</button>
					</view>
					<view class="submit">
						<button type="default" class="submit-mobile-bind" hover-class="button-hover" @click="submitBind()"> 确 认 绑 定 </button>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		props: {
			config: {
				type: Object,
				default: {}
			},
		},
		data() {
			return {
				userInfo: {},
				mobile: '', //手机号
				code: '', //验证码
				sendBtnText: '获取验证码', //获取验证码按钮文字
				sendSecord: 60, //倒计时秒数
				sendBtnDisabled: false, //验证码按钮禁用状态
			}
		},
		created() {
			//获取已登录用户数据
			this.getUserInfo()
		},
		methods: {
			/**
			 * 获取已登录用户数据
			 */
			getUserInfo: function(){
				let that = this
				let userInfo = uni.getStorageSync('userInfo') || {}
				this.userInfo = userInfo
				if (userInfo.memberInfo) {
					// 执行父级(更新数据)
					this.$emit('getData')
				}
			},
			
			/**
			 * 展开绑定手机号弹框
			 */
			bindMobileOpen(){
				this.$refs.BindMobile.open()
			},
			
			/**
			 * 获取手机号码
			 * @param {Object} e
			 */
			getMobileValue(e){
				//console.log(e)
				// 这里动态获取VALUE 值
				this.mobile = e.detail.value;
			},
			
			getMobileCode(e){
				this.code = e.detail.value;
			},
			
			/**
			 * 发送验证码
			 */
			sendCode() {
				let that = this
				let mobile = this.mobile
				/*
				if(!(/^1[34578]\d{9}$/.test(mobile))){ 
				  uni.showToast({
					  title: '请输入正确的手机号码',
					  icon: 'none',
				  });
				  return false
				}*/
				
				//请求接口数据
				let data = {
					'action': 'verify_code',
					'target': 'send_code',
					'receiver': this.mobile
				}
				//获取列表数据
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/ucenter'
					//#endif
					//#ifdef H5
					url = 'entry/site/ucenter'
					//#endif
				//
				this.util.request({
					url : url,
					data: data,
					method: 'POST',
					
					success: function (res) {
						console.log(res.data);
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000
						});
						if (res.data.code == 200) {
							that.sendBtnDisabled = true
							let o = setInterval(function() {
								if(that.sendSecord <= 0){
									clearInterval(o);
									that.sendSecord = 60;
									that.sendBtnDisabled = false
									that.sendBtnText = '获取验证码'
								}else{
									that.sendSecord = that.sendSecord - 1
									that.sendBtnText = that.sendSecord
								}
							},1000);
						}
					}
				})
			},
			
			/**
			 * 提交数据
			 */
			submitBind(){
				
				let that = this
				//请求接口数据
				let data = {
					'action': 'mobile',
					'mobile': this.mobile,
					'code': this.code
				}
				//获取列表数据
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/ucenter'
					//#endif
					//#ifdef H5
					url = 'entry/site/ucenter'
					//#endif
				//
				this.util.request({
					url : url,
					data: data,
					method: 'POST',
					
					success: function (res) {
						console.log(res.data);
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000
						});
						if (res.data.code == 200) {
							that.util.getUserInfo((res)=>{
								console.log('userInfo',res)
								that.getUserInfo()
								that.$emit("getUserInfo");
								that.$refs.BindMobile.close()
							})
						}
					}
				})
			},
			
			/**
			 * popup 状态发生变化触发
			 * @param {Object} e
			 */
			change: function(e) {
				console.log('popup ' + e.type + ' 状态', e.show)
			},
		}
	}
</script>

<style lang="scss">
	.bind-mobile-section {
		padding: 20rpx 0;
		background-color: #fff;
		border-radius: 10rpx 10rpx 0 0;
		.title {
			font-size: 36rpx;
			font-weight: 700;
		    text-align: center;
			margin-bottom: 10rpx;
		}
		.description {
			color: #999;
		    text-align: center;
		}
		
		.input-group {
			padding: 20rpx;
			.input-row {
				padding: 10rpx 0;
				.input-clear {
					flex: 1;
					height: 76rpx;
					line-height: 76rpx;
				}
			}
			.verify {
				display: flex;
				.input-clear {
					flex: 1;
					height: 76rpx;
					line-height: 76rpx;
				}
				button {
					width: 200rpx;
					font-size: 28rpx;
					color: #fff;
					height: 76rpx;
					line-height: 76rpx;
					&:after {
						border: 0;
					}
				}
			}
			.submit {
				padding: 20rpx 0;
				button {
					color: #fff;
					&:after {
						border: 0;
					}
				}
			}
			.hover-button {
				
			}
			.disabled {
				opacity: .6;
			}
		}
	}
	
	.Blue {
		.input-group {
			button {
				background-color: $Blue;
			}
			.hover-button {
				background-color: $Blue-hover;
			}
		}
	}
	.Green {
		.input-group {
			button {
				background-color: $Green;
			}
			.hover-button {
				background-color: $Green-hover;
			}
		}
	}
	.LightRed {
		.input-group {
			button {
				background-color: $LightRed;
			}
			.hover-button {
				background-color: $LightRed-hover;
			}
		}
	}
	.Orange {
		.input-group {
			button {
				background-color: $Orange;
			}
			.hover-button {
				background-color: $Orange-hover;
			}
		}
	}
	.LightRed {
		.input-group {
			button {
				background-color: $LightPink;
			}
			.hover-button {
				background-color: $LightPink-hover;
			}
		}
	}
	.Magenta {
		.input-group {
			button {
				background-color: $Magenta;
			}
			.hover-button {
				background-color: $Magenta-hover;
			}
		}
	}
</style>
